<template>
  <div>
    <button @click="ok()">跳转home</button>
    <button @click="ok1()">跳转about</button>
    <div class="dox">
        <div v-for="(item,i) in guge" :key="i" class="end">
            <img :src="item.mei" alt="" class="pende">
            <div class="box" >{{ item.zi }}</div>
            <div class="box" >{{ item.maney }}</div>
        </div>
    </div>
    
    
  </div>
</template>

<script>
export default {
    data(){
        return{
            guge:[
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
                {
                    mei:"https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/241151/20/4888/29186/65da1344F277588aa/4dc1b303acc1a98b.jpg.avif",
                    zi:"韩式不锈钢西餐牛排刀叉勺风甜品勺实木柄餐具家用汤勺叉 主餐勺 304不锈钢沙比利",
                    maney:"￥ 39.00",
                },
            ],
            name:"bbq"
        }
    },
    methods:{
        ok(){
            this.$router.push({
                //01 多次传参
                path:"/",
                query:{
                    name:this.name
                }
                //02 单次传参
                // name:"home",
                // params:{
                //     name:this.name
                // }
            })
        },
        ok1(){
            this.$router.push({
                //01 多次传参
                path:"/about",
                query:{
                    name:this.name
                }
                //02 单次传参
                // name:"about",
                // params:{
                //     name:this.name
                // }
            })
        }
    }
}
</script>

<style>
.pende{
    width: 230px;
    height: 230px;
}
.end{
    width: 230px;
    height: 330px;
}
.dox{
    width: 1190px;
    display: flex;
    flex-wrap:wrap ;
}
</style>